<template>
    <a-layout-sider
        style="background: var(--body-background); border-right: 2px solid #ccc"
        :width="50"
    >
        <iconItem title="大纲树" @click="openDrawer('visible', !visible)">
            <pie-chart-outlined :style="{ fontsize: FONTSIZE }" />
        </iconItem>
        <iconItem
            title="组件库"
            @click="openDrawer('visibleComponent', !visibleComponent)"
        >
            <build-outlined :style="{ fontsize: FONTSIZE }" />
        </iconItem>
        <iconItem
            title="动作面板"
            @click="openDrawer('visibleFunc', !visibleFunc)"
        >
            <function-outlined :style="{ fontsize: FONTSIZE }" />
        </iconItem>

        <!-- 大纲树 -->
        <a-drawer
            v-model:visible="visible"
            v-bind="COMMON_OPTION"
            :z-index="1099"
            :style="{
                position: 'absolute',
                left: visible ? '52px' : '0px',
            }"
        >
            <ml-outline :treeData="treeData" />
        </a-drawer>

        <!-- 函数 -->
        <a-drawer
            v-model:visible="visibleFunc"
            v-bind="COMMON_OPTION"
            :z-index="1099"
            :style="{
                position: 'absolute',
                left: visibleFunc ? '52px' : '0px',
            }"
            :closable="false"
        >
            <template #title>
                <a-space>
                    <a-button
                        @click="
                            golbal.event.push({
                                name: 'func_' + new Date().valueOf().toString(),
                            })
                        "
                        >新建</a-button
                    >
                    <a-button>删除</a-button>
                </a-space>
            </template>

            <template #extra>
                <close-outlined class="ml-icon" @click="visibleFunc = false" />
            </template>
            <a-row>
                <a-col :span="24">
                    <a-list
                        item-layout="horizontal"
                        :data-source="golbal.event"
                    >
                        <template #renderItem="{ item, index }">
                            <a-list-item>
                                <div>
                                    {{ item.name }}
                                </div>
                                <div>
                                    <a-space>
                                        <a @click="openEdit(item)">编辑</a>
                                        <a
                                            class="ml-a-danger"
                                            @click="
                                                golbal.event.splice(index, 1)
                                            "
                                            >删除</a
                                        >
                                    </a-space>
                                </div>
                            </a-list-item>
                        </template>
                    </a-list>
                </a-col>
            </a-row>
        </a-drawer>

        <!-- 函数编辑器 -->
        <func-editor
            :z-index="1099"
            v-model:visible="visibleEditFunc"
            title="函数编辑器"
            :width="800"
            :bodyStyle="{ minHeight: '500px' }"
            v-model:current="current"
        />

        <!-- 组件库 -->
        <selection-components
            :z-index="1099"
            v-model:visible="visibleComponent"
            v-bind="COMMON_OPTION"
            :style="{
                position: 'absolute',
                left: visibleComponent ? '52px' : '0px',
            }"
            :bodyStyle="{ minHeight: '500px' }"
        />
    </a-layout-sider>
</template>


<script lang="ts">
import { ref, defineComponent, reactive, toRefs, inject, Ref } from "vue";
import IconItem from "./icon-item.vue";
import {
    PieChartOutlined,
    FunctionOutlined,
    CloseOutlined,
    BuildOutlined,
} from "@ant-design/icons-vue";
import MlOutline from "./ml-outline/index.vue";
import FuncEditor from "../func-editor/index.vue";
import SelectionComponents from "./selection-components/index.vue";

export default defineComponent({
    components: {
        PieChartOutlined,
        FunctionOutlined,
        CloseOutlined,
        BuildOutlined,
        MlOutline,
        FuncEditor,
        IconItem,
        SelectionComponents,
    },
    props: {
        treeData: Array,
        golbal: Object,
    },
    setup(props) {
        // 公共属性配置
        const COMMON_OPTION = {
            placement: "left",
            mask: false,
            getContainer: false,
        };
        // 设置图标大小
        const FONTSIZE = "20px";
        // 组件库弹窗-外部需要使用
        const visibleComponent = inject<Ref<boolean>>("visibleComponent");

        // 所有弹窗属性
        const visible = reactive<any>({
            visible: false,
            visibleFunc: false,
            visibleEditFunc: false,
        });
        // 关闭全部
        const closeAll = () => {
            visibleComponent && (visibleComponent.value = false);
            Object.keys(visible).forEach((key) => (visible[key] = false));
        };
        // 弹窗事件
        const openDrawer = (key: string, val: boolean) => {
            closeAll();
            if (key === "visibleComponent") {
                visibleComponent && (visibleComponent.value = val);
            } else {
                visible[key] = val;
            }
        };

        // 获取当前函数
        const current = ref({});

        // 打开函数编辑面板
        const openEdit = (item: any) => {
            visible.visibleEditFunc = true;
            current.value = item;
        };

        return {
            COMMON_OPTION,
            FONTSIZE,
            current,
            ...toRefs(visible),
            openDrawer,
            openEdit,
            visibleComponent,
        };
    },
});
</script>